<template>
  <div class="page-miH page-bgBack">
    <div>
      <div class="textLine" v-for="i in resumeList" :key="i.enName">
        <div class="textLineLeft">{{ i.fieldName }}：</div>
        <div v-if="i.fieldTypeStr === 'upload'" class="textLineRig">
          <div class="textLineRigIMg" v-for="z in i.content" :key="z"><img width="100%" height="100%" :src="z" alt="" /></div>
        </div>
        <div v-else class="textLineRig">
          <span v-if="i.enName === 'skill'">
            <span v-for="z in i.content" :key="z" class="skillBox">{{ z }}</span>
          </span>
          <span v-else>
            <span v-if="i.fieldTypeStr === 'area'">
              <city v-if="i.content" :content="i.content"></city>
            </span>
            <span v-else> {{ i.content }}</span>
            <span v-if="i.enName === 'workYears'">年 </span>
          </span>
        </div>
      </div>
      <template v-if="showAnnex">
        <div class="Attachment">附件简历</div>
        <resume :src="src" :upload="false" :action="['download']" @upData="upDataSrc"></resume>
      </template>
    </div>
  </div>
</template>
<script>
import { findByTemplateId, selectByDefaultAll, getTalentPoolIdInfo, selectOneByTypeAndId } from "./api";
import { putJobSeekers, getDeliverRecords } from "../../api";
import resume from "@/views/recruitment/component/resume";
import city from "./city.vue";
export default {
  components: { resume, city },
  props: {
    status: {
      type: String,
      default: ""
    },
    info: {
      type: Object,
      default: () => {}
    }
  },

  watch: {
    info: {
      handler(val) {
        if (val) {
          this.basicInfo();
        }
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      principalType: "",
      name: "",
      avatar: "",
      gender: "",
      n1: require("@/assets/recruitment/n.png"),
      n2: require("@/assets/recruitment/n2.png"),
      src: "",
      afterConversionAnnex: "",
      resumeList: [],
      findData: [],
      showAnnex: false
    };
  },
  methods: {
    async onSumbitAnnex() {
      try {
        await putJobSeekers({
          id: this.$route.query.talentPoolId,
          phone: this.phone,
          name: this.name,
          annex: this.src || "",
          afterConversionAnnex: this.afterConversionAnnex || ""
        });
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    upDataSrc(e) {
      this.src = e.transformationFrontUrl;
      this.afterConversionAnnex = e.transformationResultUrl || e.transformationFrontUrl;
      this.onSumbitAnnex();
    },
    async basicInfo() {
      let require = null;
      if (this.status === "deliveryRecord") {
        require = selectOneByTypeAndId({
          type: "recruit2Delivery2",
          subjectType: "recruit",
          subjectId: this.info.recruitInfoId
        });
      } else {
        const results = await selectByDefaultAll();
        require = findByTemplateId(results.data.find((z) => z.type === "recruit2SelectResult2").id);
      }
      require
        .then((res) => {
          const data = this.status === "deliveryRecord" ? res.data.customTemplateFieldListVOList : res.data;
          this.findData = this.status !== "look" ? data : data.filter((z) => z.enName !== "name");
          this.getTalentPoolInfoFun();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getTalentPoolInfoFun() {
      const require =
        this.status === "deliveryRecord" ? getDeliverRecords(this.info.deliverRecordId) : getTalentPoolIdInfo(this.info.talentPoolId);
      require.then((res) => {
        const basicData = res.data;
        Object.keys(basicData).map((z) => {
          if (typeof basicData[z] === "string" && basicData[z].indexOf("https://") !== -1) {
            basicData[z] = basicData[z].split(",");
          }
        });
        this.basicData = basicData;
        if (this.basicData.intentionJob) {
          this.basicData.intentionJob = this.basicData.intentionJob.split("*")[1];
        }
        this.resumeList = [];
        this.findData.forEach((z) => {
          if (z.enName !== "annex") {
            this.resumeList.push({
              fieldTypeStr: z.fieldTypeStr,
              fieldName: z.fieldName,
              enName: z.enName,
              content: z.enName === "skill" && this.basicData[z.enName] ? this.basicData[z.enName].split(",") : this.basicData[z.enName]
            });
          } else {
            this.showAnnex = true;
          }
        });
        this.principalType = this.basicData.principalType;
        this.name = this.basicData.name;
        this.avatar = this.basicData.avatar;
        this.gender = this.basicData.sex;
        this.src = this.basicData.annex ? this.basicData.annex[0] : null;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.textLine {
  color: #767885;
  font-size: 14px;
  margin: 10px 0;
}
.textLineRig {
  width: 446px;
  vertical-align: middle;
  display: inline-block;
}
.textLineLeft {
  vertical-align: middle;
  display: inline-block;
}
.Attachment {
  font-weight: 500;
  color: #3c3d43;
  font-size: 16px;
}
.textLineRigIMg {
  width: 144px;
  height: 108px;
  border-radius: 4px;
  padding-right: 8px;
  display: inline-block;
}
.skillBox {
  height: 22px;
  line-height: 22px;
  padding: 0 8px;
  margin-right: 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
</style>
